<template>
  <ul>
    <li
      v-for="product in products"
    >
      <img :src="product.image_url" alt="">
      <div class="produce">
        <div class="name">{{product.product_name}}</div>
        <div class="price">￥{{product.selling_price}}</div>
        <div class="shopping"
          :disabled="product.inventory <= 0"
          @click="addToCart(product)"
        >加入购物车</div>
      </div>
    </li>
  </ul>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { LOADDATA, ADDPRODUCTTOCART } from '../../store/actionTypes'
export default {
  methods: {
    ...mapActions('product', [LOADDATA]),
    ...mapActions('cart', {addToCart: ADDPRODUCTTOCART})
  },

  computed: {
    ...mapState('product', {
      products: 'all'
    })
  },

  mounted() {
    this[LOADDATA]()
  }
}
</script>

<style lang='stylus' scoped>
@import '../../assets/ellipsis.styl'
ul
  height 100%
  overflow-y scroll
  li
    display flex
    flex-direction row
    justify-content space-between
    margin-bottom .1212rem
    &:last-child
      margin-bottom .5rem
  img
    width 1.0875rem
    height 1.0875rem
  .produce
    width 100%
    padding-left .2rem
    div
      font-size .16rem
    .name
      ellipsis(100%,2)
    .price
      color red
    .shopping
      width 30%
      height .34rem
      background-color red
      line-height .34rem
      text-align center
      border-radius .1rem
      color white
    .shopping:active
      opacity 0.5
</style>